<template>
  <div id='ranking-boards'>
    <div class='ranking-board-title'>地域分布</div>
    <el-row
      :gutter='24'
      style='overflow: hidden'>
      <el-col
        :span='24'
        style='padding: 0'>
        <div
          id='sf'
          style="height:550px"/>
      </el-col>
    </el-row>
    <!--<histogram v-for='(item, index) in renderData' :index='index' :key='index' :rawData='item' :loading='loading'/>-->
  </div>
</template>

<script>
/* eslint-disable */
import commonMixin from '@/mixins/common'
import histogram from '@/views/modules/dataV/components/histogram'
let echarts = require('echarts')
import 'echarts/map/js/china.js'
let dataList = [
{
  name: '南海诸岛',
  value: 0
},
{
  name: '北京',
  value: 54
},
{
  name: '天津',
  value: 13
},
{
  name: '上海',
  value: 40
},
{
  name: '重庆',
  value: 75
},
{
  name: '河北',
  value: 13
},
{
  name: '河南',
  value: 83
},
{
  name: '云南',
  value: 11
},
{
  name: '辽宁',
  value: 19
},
{
  name: '黑龙江',
  value: 15
},
{
  name: '湖南',
  value: 69
},
{
  name: '安徽',
  value: 60
},
{
  name: '山东',
  value: 39
},
{
  name: '新疆',
  value: 4
},
{
  name: '江苏',
  value: 31
},
{
  name: '浙江',
  value: 104
},
{
  name: '江西',
  value: 36
},
{
  name: '湖北',
  value: 1052
},
{
  name: '广西',
  value: 33
},
{
  name: '甘肃',
  value: 7
},
{
  name: '山西',
  value: 9
},
{
  name: '内蒙古',
  value: 7
},
{
  name: '陕西',
  value: 22
},
{
  name: '吉林',
  value: 4
},
{
  name: '福建',
  value: 18
},
{
  name: '贵州',
  value: 5
},
{
  name: '广东',
  value: 98
},
{
  name: '青海',
  value: 1
},
{
  name: '西藏',
  value: 0
},
{
  name: '四川',
  value: 44
},
{
  name: '宁夏',
  value: 4
},
{
  name: '海南',
  value: 22
},
{
  name: '台湾',
  value: 3
},
{
  name: '香港',
  value: 5
},
{
  name: '澳门',
  value: 5
}]
var geoCoordMap = {};
var convertData = function(data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
};

export default {
  name: 'topLeft',
  components: { histogram },
  mixins: [ commonMixin ],
  data () {
    return {
      loading: false,
      rawData: []
    }
  },
  computed: {
    renderData () {
      return this.rawData
    }
  },
  created () {
    // this.getData();
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      this.loading = true
      let { data: res } = await this.$http.get(this.getApiUrl('datapanel/show/shipmentGroupByProvince', false))
      this.loading = false
      if (res.code === 0) {
        let provinces = []
        let values = []
        let context = this
        let formattedData = res.data.map(function(item){
          values.push(item.amount)
          let _province = context.getAbbreviationName(item.province)
          provinces.push(_province)
          return {
            name: _province,
            value: item.amount
          }
        })
        // console.log(values.sort())
        // console.log(provinces)
        this.initMap(formattedData)
      }
    },
    getAbbreviationName (province) {
      let _province = province.replace('省', '').replace('市', '')
      let keywords = ['新疆', '内蒙古', '西藏', '广西', '宁夏']
      for(let index in keywords) {
        if(province.indexOf(keywords[index]) > -1) {
          return keywords[index]
        }
      }
      return _province
    },
    getExtremeValue (data) {
      let values = []
      values = data.map(function (item) {
        return item.value
      })
      let sortedValues = values.sort(function (a, b) {
        return a - b
      })
      return {min: sortedValues[0], max: sortedValues[sortedValues.length - 1]}
    },
    initMap (data) {

      let myChart = echarts.init(document.getElementById('sf'))
      let { min, max } = this.getExtremeValue(data)
      let option = {
        tooltip: {
          show: false,
          triggerOn: 'mousemove',
          formatter: function(e) {
            return .5 == e.value ? e.name + '：提货量' : e.seriesName + '<br />' + e.name + '：' + e.value
          }
        },
        visualMap: {
          show: false,
          min,
          max,
          left: '10%',
          top: 'bottom',
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ['#fff', '#04387b'] // 蓝绿
          },
          textStyle: {
            color: '#fff'
          }
        },
        // visualMap: {
        //   min: 0,
        //   max: 1000,
        //   left: 26,
        //   bottom: 40,
        //   showLabel: !0,
        //   text: ['高', '低'],
        //   pieces: [{
        //     gt: 100,
        //     label: '> 100 人',
        //     color: '#7f1100'
        //   }, {
        //     gte: 10,
        //     lte: 100,
        //     label: '10 - 100 人',
        //     color: '#ff5428'
        //   }, {
        //     gte: 1,
        //     lt: 10,
        //     label: '1 - 9 人',
        //     color: '#ff8c71'
        //   }, {
        //     gt: 0,
        //     lt: 1,
        //     label: '疑似',
        //     color: '#ffd768'
        //   }, {
        //     value: 0,
        //     color: '#ffffff'
        //   }],
        //   show: !0
        // },
        geo: {
          map: 'china',
          roam: !1,
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1.25,
          top: 60,
          label: {
            normal: {
              show: !0,
              color: 'rgba(255,255,255,1)'
            }
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: '#f2d5ad',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              }
            }
          },
          {
            name: '提货量',
            type: 'map',
            geoIndex: 0,
            data,
            aspectScale: 0.2,
          }
        ]
      };
      myChart.setOption(option)
    }
  }
}
/* eslint-disable */
</script>

<style lang='less' scoped>

  #ranking-boards {
    /*box-shadow: 0 0 3px blue;*/
    /*background-color: rgba(6, 30, 93, 0.5);*/
    /*border-top: 2px solid rgba(1, 153, 209, .5);*/
    box-sizing: border-box;
    padding: 0px 30px;

    .ranking-board-title {
      font-weight: bold;
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 20px;
    }

  }
</style>
